<template>
	<view>
		<picker class="minutepicker" @columnchange="ColumnChange" @change="MonthDayChange" mode="multiSelector" :value="Index" :range="MonthDayList">
			<view class="uni-input">{{IsDefault==1?placeholder:(Month+"-"+Day)}}</view><input :name="name" type="text" class="hidden" :value="IsDefault==1?'':(Month+'-'+Day)"></input>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Index:[0,0],
				Month:'01',
				Day:'01',
				IsDefault:1,
				MonthDayList:[],
			};
		},
		props:{
			name:{
				type:String,
				default:''
			},
			defaultValue:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:''
			}
		},
		created(){
			var MonthList=[], DayList=[];
			for(var i=1;i<=12;i++){MonthList.push(i+"月");}
			//for(var i=1;i<=31;i++){DayList.push(i+"日");}
			this.MonthDayList.push(MonthList);
			//this.MonthDayList.push(DayList);
			var strs=["01","01"];
			if(this.defaultValue!=''){
				strs=this.defaultValue.split('-');
				this.IsDefault=0;
			}
			this.Month= strs[0];
			this.Day=strs[1];
			this.Init_Day(this.Month);
			this.Index=[this.Month-1,this.Day-1];
			
		},
		watch: {
			// 默认值
			defaultValue() {
				// 设置默认值
				var strs=["01","01"];
				if(this.defaultValue!=''){
					strs=this.defaultValue.split('-');
					this.IsDefault=0;
				}
				this.Month= strs[0];
				this.Day=strs[1];
				this.Index=[this.Month-1,this.Day-1];
			}
		},
		methods:{
			ColumnChange(e){
				var Month= e.detail.value+1;
				if(e.detail.column==0){
					this.$set(this.Index,0,Month-1);
					this.Init_Day(Month);
				}else{
					this.$set(this.Index,1,Month-1);
				}
			},
			Init_Day(Month){
				var DayList=[];
				if(Month==2)
				{
					for(var i=1;i<=29;i++){DayList.push(i+"日");}
				}
				else if(Month==4 || Month==6 || Month==9 || Month==11)
				{
					for(var i=1;i<=30;i++){DayList.push(i+"日");}
				}else
				{
					for(var i=1;i<=31;i++){DayList.push(i+"日");}
				}
				this.$set(this.MonthDayList,1,DayList);
			},
			MonthDayChange(e){
				var Month= parseInt(e.detail.value[0])+1;
				var Day=parseInt(e.detail.value[1])+1;
				this.Month=Month<10?'0'+Month:Month
				this.Day=Day<10?'0'+Day:Day;
				var value=this.Month+"-"+this.Day;
				this.IsDefault=0;
				this.Index=[Month-1,Day-1];
				this.$emit("change",{
					value: value 
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.minutepicker{min-width:300rpx;}
</style>
